<template>
  <div>
    <van-search v-model="hotMusic"  placeholder="请输入搜索关键词" shape="round" />
    <div class="search_wrap" v-if="resultList.length == 0">
      <p class="hot_title">热门搜索</p>
          <ul class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <li
        @click="getValue(item.first)"
        class="hot_item"
        v-for="(item,index) in SearchHotList"
        :key="index"
        >{{item.first}}</li>
         </ul>
      </div>
       <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <Song v-for="item in resultList"
      :key="item.id"
      :name="item.name"
      :author="item.ar[0].name"
      :id="item.id"
      >
      </Song>
    </div>
    </div>
</template>

<script>
import { SearchHotAPI, hotResultAPI } from '@/api'
import Song from '@/components/SongComponents.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Search',
  data () {
    return {
      hotMusic: '',
      SearchHotList: [],
      resultList: [],
      timer: null
    }
  },
  components: {
    Song
  },
  methods: {
    getValue (str) {
      this.hotMusic = str
    }
  },
  async created () {
    const res = await SearchHotAPI()
    this.SearchHotList = res.data.result.hots
  },
  watch: {
    async hotMusic (newValue, oldValue) {
      const flag = this.SearchHotList.findIndex(item => item.first === newValue)
      if (flag === -1) {
        clearTimeout(this.timer)
        // eslint-disable-next-line no-return-assign
        if (newValue.length === 0) return this.resultList = []
        this.timer = setTimeout(async () => {
          const res = await hotResultAPI({ tyoe: 1, limit: 30, keywords: newValue })
          this.resultList = res.data.result.songs
        }, 800)
      } else {
        const res = await hotResultAPI({ tyoe: 1, limit: 30, keywords: newValue })
        this.resultList = res.data.result.songs
      }
    }
  }
}
</script>

<style scoped lang="less">
 /deep/ .van-field__control{
font-size: 14px;
}
.search_wrap{
  padding: 0.266667rem;
  .hot_title {
    font-size: 18px;
    color: #666;
}
.hot_name_wrap{
  margin:6px 0 ;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;

}
}

</style>
